<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Clone</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
    <div class="logo-container">
        <span>☰</span>
        <span>YouTube</span>
    </div>
    <div class="search-container">
        <input type="text" placeholder="搜索">
        <button>🔍</button> </div>
    <div class="icons-container">
        <span>🔔</span>
        <span>➕</span>
        <span>🧑‍</span>
    </div>
</header>
<div class="main-container">
    <div class="sidebar">
        <ul>
            <li class="active"><span>🏠</span><span>首页</span></li>
            <li><span>🔥</span><span>热门内容</span></li>
            <li><span>💡</span><span>订阅内容</span></li>
            <hr>
            <li><span>📚</span><span>媒体库</span></li>
            <li><span>🕒</span><span>历史记录</span></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="video-card">
        <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
        <div class="details">
            <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
            <div class="text-info">
                <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                <p class="channel-name">学习辅导 Gemini</p>
                <p class="views">1.2万次观看 · 1天前</p>
            </div>
        </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
        <div class="video-card">
            <img class="thumbnail" src="https://picsum.photos/320/180" alt="Video Thumbnail">
            <div class="details">
                <img class="avatar" src="https://picsum.photos/48" alt="Channel Avatar">
                <div class="text-info">
                    <h3 class="title">学习 CSS 的最佳方式：项目驱动学习法！</h3>
                    <p class="channel-name">学习辅导 Gemini</p>
                    <p class="views">1.2万次观看 · 1天前</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>